<!DOCTYPE html>
<meta charset="utf-8" />
<title>cssom-view - offsetParent, offsetTop, offsetLeft, offsetWidth, and offsetHeight on inline elements</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
  #real-offset-parent {
    font: 10px/1 Ahem;
    margin: 0;
    border: none;
    padding: 0;
  }
  #real-offset-parent, #decoy-offset-parent {
    position: relative;
  }
</style>
<body>
<div id="real-offset-parent">
  <span id="inline-1">ABC</span>
  <span id="inline-2">ABC<br />ABC</span>
  <span id="inline-3">ABC</span>
</div>
<div id="decoy-offset-parent">
  <!--
    Servo used to simply return the last valid offsetParent in the
    document for inline nodes. This was often coincidentally the
    correct result in contrived test cases such as this one. This
    element is here to catch such bad behavior in the unlikely event
    that it ever arises again.
  -->
</div>
<script>
window.onload = function() {
  var realOffsetParent = document.getElementById('real-offset-parent');
  var inline1 = document.getElementById('inline-1');
  var inline2 = document.getElementById('inline-2');
  var inline3 = document.getElementById('inline-3');

  test(function() {
    assert_equals(inline1.offsetParent, realOffsetParent,
      "offsetParent of #inline-1 should be #real-offset-parent.");
    assert_equals(inline2.offsetParent, realOffsetParent,
      "offsetParent of #inline-2 should be #real-offset-parent.");
    assert_equals(inline3.offsetParent, realOffsetParent,
      "offsetParent of #inline-3 should be #real-offset-parent.");
  }, "offsetParent");

  test(function() {
    assert_equals(inline1.offsetTop, 0,
      "offsetTop of #inline-1 should be 0.");
    assert_equals(inline2.offsetTop, 0,
      "offsetTop of #inline-2 should be 0.");
    assert_equals(inline3.offsetTop, 10,
      "offsetTop of #inline-3 should be 10.");
  }, "offsetTop");

  test(function() {
    assert_equals(inline1.offsetLeft, 0,
      "offsetLeft of #inline-1 should be 0.");
    assert_equals(inline2.offsetLeft, 40,
      "offsetLeft of #inline-2 should be 40.");
    assert_equals(inline3.offsetLeft, 40,
      "offsetLeft of #inline-3 should be 40.");
  }, "offsetLeft");

  test(function() {
    assert_equals(inline1.offsetWidth, 30,
      "offsetWidth of #inline-1 should be 30.");
    assert_equals(inline2.offsetWidth, 70,
      "offsetWidth of #inline-2 should be 70.");
    assert_equals(inline3.offsetWidth, 30,
      "offsetWidth of #inline-3 should be 30.");
  }, "offsetWidth");

  test(function() {
    assert_equals(inline1.offsetHeight, 10,
      "offsetHeight of #inline-1 should be 10.");
    assert_equals(inline2.offsetHeight, 20,
      "offsetHeight of #inline-2 should be 20.");
    assert_equals(inline3.offsetHeight, 10,
      "offsetHeight of #inline-3 should be 10.");
  }, "offsetHeight");
}
</script>
</body>
